<script setup>
import {onMounted, ref} from 'vue'
import Msg from '@/components/message'
import { addTagApi } from '@/commons/api'

const props = defineProps({
  tagIdArr: {
    type: Array,
    default: []
  },
  tagNameArr: {
    type: Array,
    default: []
  },
  kind: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['setTags'])

const tagList = ref([])

onMounted(() => {
  if(props.tagIdArr && props.tagIdArr.length>0) {
    for(let i=0, c=props.tagIdArr.length; i<c; i++) {
      tagList.value.push({tagId: props.tagIdArr[i], tagName: props.tagNameArr[i]})
    }
  }
})

// 显示添加标签的文本框
const addFlag = ref(false)
const nameRef = ref('')
const addTag = () => {
  addFlag.value = !addFlag.value
  setTimeout(() => {
    nameRef.value.focus()
  }, 200)
}

let idArr=[], nameArr=[]

// 保存标签
const tagForm = ref({tagName: '', kind: ''})
const saveTag = async () => {
  const tagName = tagForm.value.tagName
  if(tagName==='' || tagName.length>80) {
    addFlag.value = !addFlag.value
    return
  }
  let n = 0
  tagList.value.forEach(cur => {
    if(cur.tagName === tagName) {
      n = 1
    }
  })
  if(n === 1) {
    addFlag.value = !addFlag.value
    tagForm.value.tagName = ''
    Msg({ kind: 'warn', txt: '当前标签列表中已经存在，无需要重复添加。' })
    return
  }
  idArr=[]
  nameArr=[]
  tagForm.value.kind = props.kind
  const res = await addTagApi(tagForm.value)
  if(res.code === import.meta.env.VITE_SUCCESS_CODE) {
    addFlag.value = !addFlag.value
    tagList.value.push(res.data)
    for(let i=0, c=tagList.value.length; i<c; i++) {
      idArr.push(tagList.value[i].tagId)
      nameArr.push(tagList.value[i].tagName)
    }
  } else {
    Msg({ kind: 'error', txt: res.msg })
  }
  emits('setTags', idArr, nameArr)
  tagForm.value.tagName = ''
}

// 删除标签
const delTag = async (idx) => {
  tagList.value.splice(idx, 1)
  idArr = []
  nameArr = []
  for(let i=0, c=tagList.value.length; i<c; i++) {
    idArr.push(tagList.value[i].tagId)
    nameArr.push(tagList.value[i].tagName)
  }
  emits('setTags', idArr, nameArr)
}
</script>

<template>
  <div class="tg-a">
    <div class="tg-b" v-show="addFlag"><input type="text" v-model="tagForm.tagName" ref="nameRef" maxlength="80" class="tg-c" @blur="saveTag()" /></div>
    <div class="tg-d" v-show="!addFlag" @click="addTag()"><i class="iconfont">&#xea80;</i> 增加标签</div>
    <div class="tg-e">
      <div class="tg-f" v-for="(curTag, idx) in tagList" :key="curTag.tagId">{{curTag.tagName}} <i class="iconfont tg-g" @click="delTag(idx)">&#xea7f;</i></div>
    </div>
  </div>
</template>

<style scoped>
.tg-a {width: 100%; display: flex; display: -webkit-flex; flex-wrap: wrap;}
.tg-b {margin: 5px; cursor: pointer}
.tg-c {width: 100px; padding: 5px 10px;}
.tg-d {margin: 5px; padding: 5px 10px; background-color: #409EFF; border: 1px #409EFF solid; border-radius: 4px; color: #FFF; cursor: pointer}
.tg-d:hover {background-color: #66B1FF; border: 1px #66B1FF solid;}
.tg-e {flex-grow: 1; display: inline-flex; display: -webkit-inline-flex; flex-wrap: wrap;}
.tg-f {margin: 5px; padding: 5px 10px; background-color: #66B1FF; border: 1px #409EFF solid; border-radius: 4px; color: #FFF;}
.tg-f:hover {background-color: #409EFF; border: 1px #409EFF solid;}
.tg-g {cursor: pointer; font-size: 14px;}
</style>
